﻿@section Head{
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
}
<div id="jokelist" v-cloak v-bind:class="{'am-hide':bodyHide}">
    <ul class="am-list am-margin-0 joke-list">
        <li class="am-g" v-for="item in JokeList">
            <div>
                <h3 class="joke-title"><a href="#">{{item.Title}}</a></h3>                
                <div v-if="item.Type==3" class="joke-content am-text-center">
                    <iframe class="video_iframe" data-vidtype="1" allowfullscreen="" frameborder="0" height="258" width="300"
                            v-bind:data-src="'https://v.qq.com/iframe/preview.html?vid='+item.Content+'&amp;width=500&amp;height=375&amp;auto=0'"
                            v-bind:src="'http://v.qq.com/iframe/player.html?vid='+item.Content+'&amp;width=300&amp;height=258&amp;auto=0'"
                            style="width: 300px !important; height: 258px !important; overflow: hidden;margin:0 auto;" scrolling="no"></iframe>
                </div>
                <div v-else-if="item.Type==2" class="joke-content">
                    <img alt="" v-bind:src="item.Content" class="am-img-responsive" />
                </div>
                <div v-else class="joke-content" v-html="item.Content"></div>
            </div>
            <div class="joke-list-icon">
                <a @@click="votelike(item)" class="btnLike am-icon-thumbs-o-up am-margin-right" v-bind:class="{active:item.isLike}"><small class="number">{{item.LikeCount | numDisplay}}</small></a>
                <a @@click="votehate(item)" class="btnHate am-icon-thumbs-o-down am-margin-right" v-bind:class="{active:item.isHate}"><small class="number">{{item.HateCount| numDisplay}}</small></a>
                <a href="#" class="am-icon-share-square-o am-fr am-margin-right"><small class="number">分享</small></a>
            </div>
        </li>
    </ul>
    <div v-if="isFull">
        <div class="am-text-center am-text-danger"><b>没有了！</b></div>
    </div>
    <div v-else>
        <a v-show="!isLoading" class="am-btn am-btn-success am-btn-block" @@click="loadData">
            <i class="am-icon-refresh"></i>&nbsp;加载更多
        </a>
        <a v-show="isLoading" class="am-btn am-btn-success am-btn-block " disabled>
            <i class="am-icon-spinner am-icon-pulse"></i>&nbsp;加载中
        </a>
    </div>


</div>
@section Scripts{
    <script>
        var type = GetQueryString('type');
        $(function () {
            type = type == '' ? '0' : type;
            $(".web-nav li:eq(" + type + ")").addClass("active");
            $(".am-topbar-nav li:eq(" + type + ")").addClass("am-active");
        })

        var app = new Vue({
            el: '#jokelist',
            data: {
                JokeList: [],
                isLoading: false,
                isFull: false,
                idx: 1,
                bodyHide:true
            },
            filters: {
                'numDisplay': function (num) {
                    return num == '' ? '0' : num;
                },
                'wxVideo': function (src) {
                    return num == '' ? '0' : num;
                }
            },
            methods: {
                //加载数据
                loadData: function (item) {
                    var self = this;
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("Hybird")",
                        dataType: "json",
                        data: "idx=" + self.idx + "&typeid=" + type,
                        success: function (result) {
                            if (result.state == "success") {
                                self.idx++;
                                self.JokeList = self.JokeList.concat(result.jokes);
                            }
                            else {
                                self.isFull = true;
                            }
                        },
                        beforeSend: function () {
                            self.isLoading = true;
                        },
                        complete: function () {
                            self.isLoading = false;
                        }
                    });
                },
                votelike: function (item) {                    
                    if (item.isLike)
                        return;
                    item.isLike = true;
                    if (item.LikeCount == '')
                        item.LikeCount = 0;                 
                    item.LikeCount++;
                    voteJoke(item.Id, item.Type, 1);
                },
                votehate: function (item) {                    
                    if (item.isHate)
                        return;
                    item.isHate = true;
                    if (item.HateCount == '')
                        item.HateCount = 0;
                    item.HateCount++;

                    voteJoke(item.Id, item.Type, 0);
                },
            },
            mounted: function () {
                this.$nextTick(function () {                    
                    this.loadData();
                    this.bodyHide = false;
                })
            }
        })

        function voteJoke(jokeid,type,isLike) {
            $.ajax({
                type: "POST",
                url: "@Url.Action("Vote")",
                dataType: "json",
                data: {
                    jokeid: jokeid,
                    type: type,
                    isLike:isLike
                },
                success: function (result) {
                }
            });
        }
    </script>
}